import React, { Component } from "react";

// 引入classnames，用于给不同的情况，去添加不同的样式
import classNames from "classnames/bind";
import styles from "./05-class-names.less";

// 返回一个cx的函数
let cx = classNames.bind(styles);

class App extends Component {
  state = {
    show: true,
  };
  render() {
    let className = cx({
      // key表示类名，value表示表达式
      red: false,
      green: this.state.show,
      weight: this.state.show && this.props.a === 1,
    });
    return (
      <>
        <h2>为不同的情况添加不同的样式</h2>
        {/* <p style={{ color: this.state.show ? "green" : "red" }}>hello react!</p> */}
        {/* <p className={this.state.show ? "green" : "red"}>hello react!2</p> */}

        <p className={className}>hello react!3</p>
      </>
    );
  }
}

export default App;
